<template>
    <div>
        <!--el-radio-group 
            class="charts-radio-group"
            v-model="visitType" 
            size="small" 
            @change="handleVisithange"
            v-if="showPvUv">
            <el-radio-button label="pv">次数</el-radio-button>
            <el-radio-button label="uv">人数</el-radio-button>
        </el-radio-group-->
        <el-radio-group 
            class="charts-radio-group"
            v-model="dateType" 
            size="small" 
            @change="handleRadioChange">
            <el-radio-button label="visit_date_7">近7天</el-radio-button>
            <el-radio-button label="visit_date_30">近30天</el-radio-button>
        </el-radio-group>
        <el-radio-group 
            class="charts-radio-group"
            style="margin-left: 10px"
            v-model="dateType" 
            size="small" 
            @change="handleRadioChange"
            v-if="showParticleSize">
            <el-radio-button label="visit_date_7_week">周</el-radio-button>
            <el-radio-button label="visit_date_7_month">月</el-radio-button>
        </el-radio-group>
    </div>
</template>
<script>
import { dateFormatter } from '@/common/js/util.js';
export default {
    name: 'datePicker',
    props: {
        showParticleSize: {
            type: Boolean,
            default: false
        },
        showPvUv: {
            type: Boolean,
            default: false
        },
        _dateType: String,
        nowDay: false
    },
    data() {
        return {
            // visitType: 'pv',
            dateType: 'visit_date_7',
            dateInterval: this.nowDay ? [this.handleDay(-6), this.handleDay()] : [this.handleDay(-7), this.handleDay(-1)],
            particleSize: "day" // 粒度
        }
    },
    methods: {
        handleRadioChange(value) {
            let diff_day = -7;
            switch(value) {
                case 'visit_date_custom': // 自定义
                    break;
                case 'visit_date_7_month':
                    this.dateInterval = this.getMonthDay(7, false, true);
                    this.particleSize = "month"
                    break;
                case 'visit_date_7_week':
                    this.dateInterval = this.getWeekDay(7, false, true);
                    this.particleSize = "week"
                    break;
                case 'visit_date_30':
                    diff_day = -30;
                default:
                    if(this.nowDay) {
                        this.dateInterval = [this.handleDay(diff_day + 1), this.handleDay()];
                    } else {
                        this.dateInterval = [this.handleDay(diff_day), this.handleDay(-1)];
                    }
                    this.particleSize = "day"
                    break;
            }
            this.handleChange();
        },
        handleVisithange(value) {
            this.visitType = value
            this.handleChange();
        },
        handleChange() {
            if(this.dateInterval) {
                if(this.particleSize) {
                    // if(this.showPvUv) {
                        // this.$emit("getData", this.dateInterval, this.particleSize, this.visitType)
                    // } else {
                        this.$emit("getData", this.dateInterval, this.particleSize)
                    // }
                } else {
                    this.$emit("getData", this.dateInterval)
                }
            }
        },
        handleDay(diff_day) {
            return dateFormatter('YYYY-MM-DD', Date.now() + diff_day * 24 * 3600 * 1000);
        },
        getMonthDay(diff_month, add = false, now_month = false) {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let first_day, last_day;
            const _diff_month = now_month ? 1 : 0;

            if(add) {
                // 开始月（自然月第一天）
                month = month + 1 - _diff_month;
                if(month > 12) year++, month = month - 12;
                first_day = `${year}-${this.prefixZero(month)}-01`

                // 结束月（自然月最后一天）
                month = date.getMonth() + 1 + diff_month - _diff_month;
                year = date.getFullYear();
                if(month > 12) year++, month = month - 12;
                const date2 = new Date((new Date(year, month, 1)).getTime() - 1000 * 60 * 60 * 24);
                last_day = `${date2.getFullYear()}-${this.prefixZero(date2.getMonth()+1)}-${date2.getDate()}`

            } else {
                month = month - diff_month + _diff_month
                if(month <= 0)  year--, month = month + 12;

                // 开始月（自然月第一天）
                first_day = `${year}-${this.prefixZero(month)}-01`

                // 结束月（自然月最后一天）
                if (now_month) date.setMonth(date.getMonth() + 1, 1)
                else date.setDate(1)
                const date3 = new Date(date.getTime() - 1000 * 60 * 60 * 24);
                last_day = `${date3.getFullYear()}-${this.prefixZero(date3.getMonth()+1)}-${date3.getDate()}`
            }
            
            return [first_day, last_day];
        },
        getWeekDay(diff_week, add = false, now_week = false) {
            let diff_day = diff_week * 7 * (add ? 1 : -1);
            let diff_day2 = 0;
            const _diff_day = (add ? -1 : 1) * (now_week ? 7 : 0);

            const date = new Date();
            if(date.getDay() == 0) { // 0 为星期天
                if(add) diff_day2 = 1;
                else diff_day2 = -7;
            } else {
                if(add) diff_day2 = 8 - date.getDay();
                else diff_day2 = -date.getDay();
            }
            diff_day2 += _diff_day
            diff_day = diff_day + diff_day2 + (!add ? 1 : -1)
            const date2 = new Date(date);
            date2.setDate(date.getDate() + diff_day);
            
            const first_day = date2.getFullYear() + "-" + this.prefixZero(date2.getMonth() + 1) + "-" + this.prefixZero(date2.getDate());

            const date3 = new Date(date)
            date3.setDate(date.getDate() + diff_day2)
            const last_day = date3.getFullYear() + "-" + this.prefixZero(date3.getMonth() + 1) + "-" + this.prefixZero(date3.getDate());
            const week_day = [first_day, last_day];
            if(add) {
                return week_day.reverse();
            }
            return [first_day, last_day];
        },
        prefixZero(num, n = 2) {
            return (Array(n).join(0) + num).slice(-n);
        }
    },
    created() {
        if (this._dateType) {
            this.dateType = this._dateType
            this.handleRadioChange(this._dateType)
        } else {
            this.handleChange()
        }
    }
}
</script>
<style scoped lang="scss">
    /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background: none;
        border: none;
        color:#9FCBFF;
        box-shadow: none;
    }
    /deep/.el-radio-button__inner {
        background: none;
        border: none;
        color: #6682AB;
        padding: 9px 7px;
        font-size: 14px;
    }
    /deep/.el-radio-button:first-child .el-radio-button__inner {
        border: none;
    }
    .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
        box-shadow: none;
    }
</style>